<template>
  <div class="fix_bottom bgfff edit_input trans2">


    <div class="im_bottom disflex pl15 pr15 pt5 pb5 bgfff jsbet borderbox">

      <div class="pt5">
        <span class="disblock lh30 w65 textc bblue cblue fs16 bradius5" @click="useful_tap">常用语</span><!---->
      </div>
      <input type="text"
             class="w170 bgf5f6 bradius5 pl6 lh39 h39 fs14 edit_input_inner"
             v-model="comments"
             fixed=true  :focus="comment_focus"
             cursor-spacing="4"
             placeholder="评论"
             @focus="inputgetFocus(this,$event)"
      >

      <!--  <textarea name="" id="" cols="30" rows="4" :auto-height="true"
                  class="w170 bgf5f6 bradius5 fs14 edit_input_inner"
                  style="max-height: 100px;overflow-y: auto;box-sizing: border-box"
                  v-model="comments"
                  fixed=true
                  :focus="comment_focus"
                  cursor-spacing="4"
                  placeholder="评论"
                  @focus="inputgetFocus(this,$event)"
                  @confirm="inputConfirm"
                  @propertychange="propertychange">
        </textarea>--><!--padding: 12px 6px 6px;-->

      <img src="https://one-stand.oss-cn-shanghai.aliyuncs.com/yimai_photos/user/smile.png" alt=""
           class="w30 h30 mt5"
           @click="smile_tap">
      <div class="pt5">
        <span class="bgblue cfff w50 textc lh30 fs16 bradius5 disblock" @click="inputConfirm">发送</span>
      </div>
    </div>

    <!--表情-->
    <div class="trans2 disflex align-cen" :tabindex="0"
         :style="{height:emoji_show||useful_show ? keyboard_height: 0}"><!---->
      <!--:class="emoji_show ? 'h250': 'h0'"-->
      <div v-show="!useful_show" class="h100p w100p">
        <swiper class="swiper-inner h100p" :indicator-dots="true"
                :circular="true">
          <div>
            <swiper-item class="bgf5f6 disflex align-cen">
              <div class="disflex wrap jsbet bgf4 pl21 pr21 emoji pt15">
                <img :src="'http://soupu.oss-cn-shanghai.aliyuncs.com/emoji/'+e.emoji+'.png'"
                     alt="" v-for="(e,k) in emojis"
                     :key="k"
                     class="w25 h25 mr13 mb15 mt5 ml13"
                     @click.stop="emoji_tap(e.char,e.emoji)"
                     v-if="k < 24">
              </div>
            </swiper-item>
          </div>
          <div>
            <swiper-item class="bgf5f6  disflex align-cen">
              <div class="disflex wrap jsbet bgf4 pl10 pr10 emoji pt15">
                <img :src="'http://soupu.oss-cn-shanghai.aliyuncs.com/emoji/'+e.emoji+'.png'"
                     alt="" v-for="(e,k) in emojis"
                     :key="k" class="w25 h25 mr13 mb15 mt5 ml13"
                     @click.stop="emoji_tap(e.char,e.emoji)"
                     v-if="k < 48 && k > 23">
              </div>
            </swiper-item>
          </div>
          <div>
            <swiper-item class="bgf5f6  disflex align-cen">
              <div class="disflex wrap jsbet bgf4 pl10 pr10 emoji pt15">
                <img :src="'http://soupu.oss-cn-shanghai.aliyuncs.com/emoji/'+e.emoji+'.png'"
                     alt="" v-for="(e,k) in emojis"
                     :key="k"
                     @click.stop="emoji_tap(e.char,e.emoji)"
                     class="w25 h25 mr13 mb15 mt5 ml13"
                     v-if="k < 72 && k >= 48">
              </div>
            </swiper-item>
          </div>
        </swiper>
      </div>

      <div v-show="useful_show" class="lh44 pl15 fs14 c38">
        <p v-for="(v,k) in useful_lists"
           :key="k"
           @click="chooseUseful(v.title)">
          {{v.title}}
        </p>

      </div>

    </div>
  </div>
</template>

<script>
  export default {
    name: "editInputer",
    props: ['type'],
    data() {
      return {
        emojiArray: [['😠', '😩', '😲', '😞', '😵', '😰', '😒', '😍',
          '😤', '😜', '😝', '😋', '😘', '😚', '😷', '😳',
          '😃', '😅', '😆', '😁', '😂', '😊', '☺', '😄',
          '😢', '😭', '😨', '😣', '😡', '😡', '😖', '😔',],
          ['😱', '😪', '😏', '😓', '😥', '😫', '😉']],
        emoji_show: false,
        comment_focus: false,
        comments: '',
        comments_back: '',//评论备份
        maxChar:20,//最大显示的字节数
        emojiChar: "☺-😋-😌-😍-😏-😜-😝-😞-😔-😪-😭-😁-😂-😃-😅-😆-👿-😒-😓-😔-😏-😖-😘-😚-😒-😡-😢-😣-😤-😢-😨-😳-😵-😷-😸-😻-😼-😽-😾-😿-🙊-🙋-🙏-✈-🚇-🚃-🚌-🍄-🍅-🍆-🍇-🍈-🍉-🍑-🍒-🍓-🐔-🐶-🐷-👦-👧-👱-👩-👰-👨-👲-👳-💃-💄-💅-💆-💇-🌹-💑-💓-💘-🚲",
        emoji: [
          "60a", "60b", "60c", "60d", "60f",
          "61b", "61d", "61e", "61f",
          "62a", "62c", "62e",
          "602", "603", "605", "606", "608",
          "612", "613", "614", "615", "616", "618", "619", "620", "621", "623", "624", "625", "627", "629", "633", "635", "637",
          "63a", "63b", "63c", "63d", "63e", "63f",
          "64a", "64b", "64f", "681",
          "68a", "68b", "68c",
          "344", "345", "346", "347", "348", "349", "351", "352", "353",
          "414", "415", "416",
          "466", "467", "468", "469", "470", "471", "472", "473",
          "483", "484", "485", "486", "487", "490", "491", "493", "498", "6b4"
        ],
        emojis: [], //qq、微信原始表情

        useful_show: false,//常用语
        useful_lists: [
          {title: '你好，请问有智能名片的产品相关介绍文档吗？'},
          {title: '你好，请问智能名片都有什么套餐，价格是怎么样的？'},
          {title: '你好，请问有智能名片的产品相关介绍文档吗？'},
          {title: '你好，我想和贵公司合作，具体怎么操作呢？'},
        ],
        height_class: 'hide',
        keyboard_height:'226px',
      }
    },
    onHide() {
      this.clearPage();
    },
    mounted() {
      var em = {},
        that = this,
        emChar = that.emojiChar.split("-");
      var emojis = [];
      that.emoji.forEach(function (v, i) {
        em = {
          char: emChar[i],
          emoji: "0x1f" + v
        };
        emojis.push(em)
      });
      that.emojis = emojis;
      // console.log(that.emojis)
    },
    onPageScroll: function (e) {
      this.comment_focus = false;
    },
    watch: {
      comment_focus(newVal, oldVal) {
        /*       wx.createSelectorQuery().select('.edit_input_inner').fields({
                   dataset: true,
                   size: true,
                   scrollOffset: true,
                   properties: ['scrollX', 'scrollY'],
                   computedStyle: ['margin', 'backgroundColor'],
                   context: true,
               }, function (res) {
                   console.log(res);

               }).exec()*/
      },
      comments(newVal, oldVal) {
        //    console.log('watch --- comments----', newVal, this.Checkval(newVal));
        this.comments=newVal
//                this.$emit("comment",newVal)
      }
    },
    methods: {
      addComment(index1) {//添加评论
        // this.comment_focus = true ;
        this.add_comments_index = index1;
        let v = this;
        setTimeout(function () {
          v.comment_focus = true;
        }, 200)
      },
      smile_tap() {//显示关闭emoji
        if (!this.emoji_show) {
          this.useful_show = false;
          this.emoji_show = true;
          this.comment_focus = false;
          // this.height_class = 'h195'
        } else {
          this.useful_show = false;
          this.comment_focus = false;
          this.emoji_show = false;
        }

      },
      useful_tap() {
        if (!this.useful_show) {
          this.useful_show = true;
          this.emoji_show = false;
          this.comment_focus = false;
        } else {
          this.useful_show = false;
          this.emoji_show = false;
          this.comment_focus = false;
        }
      },
      inputgetFocus(that,e) {//input框focus时
        let v = this;
        v.comment_focus = true;
        console.log(e);
        if(v.keyboard_height == 0) { v.keyboard_height = e.target.height + 'px';}
      },
      emoji_tap(char) {//点击表情时
        this.comments = this.comments + char;
        let v = this;
        /*   setTimeout(function () {
               v.comment_focus = true ;
           },300)*/
      },
      emoji_del() {
        console.log('del');
        this.comments.substr(0, this.comments.length - 1);
        console.log(this.comments)
      },
      tap_all() {
        this.comment_focus = false;
      },
      clearPage() {//页面还原
        console.log('clearpage')
        this.comment_focus = false;
        this.comments = ' ';
      },
      chooseUseful(title) {//点击常用语
        this.comments += title;

      },
      inputConfirm() {//输入完成
        // console.log(this.comments);
        this.$emit("comment",this.comments);
        this.comment_focus = false;
        this.emoji_show = false;
        this.useful_show = false;
        this.comments='';
      },
      Checkval(str) {//判断字节数
        var n = 0;
        for (var i = 0; i < str.length; i++) {
          if (str.charCodeAt(i) < 128) {
            n++;
          } else {
            n += 2;
          }
        }
        return n //返回字节数
      },
    }
  }
</script>

<style>

  .im_by_time .im_item {
    margin-bottom: 15px;
  }

  /*.im_by_time .im_item:last-child {*/
  /*margin-bottom: 0;*/
  /*}*/

  .triangle_border_right, .triangle_border_left,.triangle_border_right1 {
    position: absolute;
    top: 12px;
    display: block;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    border: 0.5px solid #E8E8E8;
    border-top: 0;
    border-left: 0;
    background: #fff;
    box-sizing: border-box;
  }
  .triangle_border_right1{
    background: #51CDCB;
  }
  .triangle_border_right,.triangle_border_right1 {
    right: -6px;
    transform: rotate(-45deg);
  }

  .triangle_border_left {
    left: -6px;
    transform: rotate(135deg);
  }

  .noread .im_msg {
    background: #51CDCB;
    color: #fff;
  }

  .noread .im_text {
    color: #fff;
  }

  .noread .triangle_border_left, .noread .triangle_border_right,.noread .triangle_border_right1 {
    background: #51CDCB;
    border: none;
  }
</style>



































